<!-- 1：单选、2：多选、3：判断题、4：填空题、5：问答题 -->
<template>
	<div>
		<div class="question-item" v-if="qType === '1'">
			<div class="question-item-title">
				<img
					class="bt_icon"
					src="~img/cydnQt/bitian.png"
					v-if="question.required && question.required == '1'"
				/>
				{{ index + 1 }}、<span class="dan-select"></span><span>{{ question.title }}</span>
			</div>
			<van-radio-group v-model="answer.content">
				<van-radio
					icon-size="16px"
					class="question-ans"
					:name="item.prefix"
					v-for="(item, index) in question.items"
					:key="index"
					>{{ item.content }}</van-radio
				>
			</van-radio-group>
		</div>
		<div class="question-item" v-if="qType === '2'">
			<div class="question-item-title">
				<img
					class="bt_icon"
					src="~img/cydnQt/bitian.png"
					v-if="question.required && question.required == '1'"
				/>
				{{ index + 1 }}、<span class="duo-select">【多选】</span>{{ question.title }}
			</div>
			<van-checkbox-group v-model="answer.contentArray">
				<van-checkbox
					icon-size="16px"
					shape="square"
					class="question-ans"
					:name="item.prefix"
					v-for="(item, index) in question.items"
					:key="index"
					>{{ item.content }}</van-checkbox
				>
			</van-checkbox-group>
		</div>
		<div class="question-item" v-if="qType === '3'">
			<div class="question-item-title">
				<img
					class="bt_icon"
					src="~img/cydnQt/bitian.png"
					v-if="question.required && question.required == '1'"
				/>
				{{ index + 1 }}、<span>{{ question.title }}</span>
			</div>
			<van-radio-group v-model="answer.content">
				<van-radio
					icon-size="16px"
					class="question-ans"
					:name="item.prefix"
					v-for="(item, index) in question.items"
					:key="index"
					>{{ item.content }}</van-radio
				>
			</van-radio-group>
		</div>
		<div class="question-item" v-if="qType === '4'">
			<div class="question-input">
				<div class="question-item-title">
					<img
						class="bt_icon"
						src="~img/cydnQt/bitian.png"
						v-if="question.required && question.required == '1'"
					/>
					{{ index + 1 }}、
				</div>
				<div class="question-input-right" style="flex: 1">
					<template v-for="(item, index) in question.formItemList" class="qt-bao">
						<span v-if="item.type === 'text'">{{ item.content }}</span>
						<input
							class="question-num1"
							v-if="item.type === 'input' && !disabled"
							v-model="answer.contentArray[item.id]"
							placeholder=""
						/>
						<div v-if="item.type === 'input' && disabled" style="color: #293df5">
							{{ answer.contentArray[items.id] }}
						</div>
					</template>
				</div>
			</div>
		</div>
		<div class="question-item" v-if="qType === '5'">
			<div class="question-item-title">
				<img
					class="bt_icon"
					src="~img/cydnQt/bitian.png"
					v-if="question.required && question.required == '1'"
				/>{{ index + 1 }}、{{ question.title }}
			</div>
			<van-field
				v-model="answer.content"
				autosize
				label=""
				type="textarea"
				placeholder=""
				class="qt-area"
			/>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'questionOne',
		props: {
			question: {
				type: Object,
				default: function () {
					return {};
				},
			},
			qType: {
				type: [Number, String],
				default: 0,
			},
			answer: {
				type: Object,
				default: function () {
					return { id: null, content: '', contentArray: [] };
				},
			},
			disabled: {
				type: Boolean,
				default: false,
			},
			index: {
				type: Number,
			},
		},
		data() {
			return {
				aa: '',
			};
		},
		created() {
			// this.getList();
		},
		methods: {
			getList() {
				// console.log(this.question);
				// console.log(this.answer, 'answer');
			},
		},
	};
</script>

<style lang="scss" scoped>
	.question-item {
		background: #ffffff;
		box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.06);
		border-radius: 9px;
		padding: 18px;
		margin-bottom: 16px;
		.bt_icon {
			width: 16px;
		}

		/* flex-wrap: wrap; */
		.question-input {
			display: flex;
		}
		.question-input-right {
			line-height: 25px;
			font-size: 15px;
			font-weight: 400;
			/* line-height: 59px; */
			color: #2c2c2c;
			.qt-bao {
				border: 1px solid red;
			}
		}
	}
	.question-item-title {
		/* height: 50px; */
		font-size: 15px;
		font-weight: 400;
		/* line-height: 59px; */
		color: #2c2c2c;
		position: relative;
		padding-top: 2px;
	}
	.dan-select {
		//   width: 36px;
		height: 16px;
		//   background: #e3f2ed;
		border-radius: 2px;
		font-size: 14px;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		color: #186ff5;
		line-height: 18px;
		text-align: center;
		margin-right: 5px;
		display: inline-block;
	}
	.duo-select {
		//   width: 36px;
		height: 16px;
		//   background: #e4efff;
		border-radius: 2px;
		font-size: 14px;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		color: #186ff5;
		line-height: 18px;
		text-align: center;
		margin-right: 5px;
		display: inline-block;
	}
	.question-ans {
		font-size: 14px;
		font-weight: 400;
		color: #777777 !important;
		/* display: flex;
	flex-direction: column;
	justify-content: space-between; */
		margin-top: 14px;
		display: flex;
		align-items: center !important;
		/* border: 1px solid red; */
		/deep/.van-radio__label {
			color: #777777 !important;
		}
	}

	/deep/.van-checkbox__label {
		color: #777777 !important;
	}
	.question-num {
		width: 68px;
		height: 24px;
		background: #ffffff;
		border: 1px solid #e0e1e5 !important;
		border-radius: 2px;
		margin: 0 8px;
		font-size: 13px;
		font-weight: 400;
		padding: 0 8px;
	}
	.question-item-title1 {
		font-size: 15px;
		font-weight: 400;
		color: #2c2c2c;
		/* display: flex;
	align-items: center; */
		/* flex-wrap: wrap; */
	}
	.question-num1 {
		width: 100px;
		height: 20px;
		background: #ffffff;
		border: 1px solid #e0e1e5 !important;
		border-radius: 2px;
		margin: 0 8px;
		// margin-top: 6px;
		font-size: 13px;
		font-weight: 400;
		color: #777777;
		padding: 0 8px;
		// display: inline-table;
	}
	.question-item-title2 {
		margin-top: 10px;
		font-size: 12px;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		color: #777777;
	}
	.submit-btn {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 60px;
		background: #e3eeff;
		border-radius: 3px;
		font-size: 16px;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.submit-bo {
		background: #4b91e7;
		height: 44px;
		width: calc(100% - 40px);
		color: #ffffff;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 10px;
	}
	input {
		-webkit-appearance: none;
	}
	.qt-area {
		margin-top: 10px;
		width: 100%;
		-webkit-appearance: none;
		border: 1px solid rgb(238, 232, 232);
		padding: 2px;
	}
</style>
